<template>
    <div class="box_cont">
        <!-- 选词 -->
        <div class="flex_center_center h_full justify-between" v-loading="loading" v-if="step == 1">
            <div class="title_cont">
                <div class="right">
                    <div class="select_cont" @click="backFun">
                        <img class="back_img cur" src="@/assets/img/back_1.png" />
                    </div>
                </div>
                <h2>21天抗遗忘</h2>
                <div></div>
            </div>
            <div class="test_cont">
                <div class="word_cont flex_center_between cur transition" v-for="(item, index) in wordList" :key="index">
                    <chooseWord :word="item" :index="index" :chooseWordArr="chooseWords"  @chooseWordFun="chooseWordFun" />
                </div>
            </div>
            <div class="attend_btn flex_center_between">
                <div>已选择 <span class="num">{{ chooseWords.length }} </span>个单词</div>
                <div>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="warning" @click="allChoose" v-if="!isAll">全选</el-button>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="warning" @click="cancelAllChoose" v-if="isAll">取消全选</el-button>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="primary" @click="nextStep">下一步</el-button>
                </div>
            </div>
        </div>
        <!-- 选时间 -->
        <createCycle v-if="step == 2" :saveLoading="cycleLoading" @submitCycelFn="submitCycelFn" @perNextStep="perNextStep"></createCycle>
    </div>

</template>

<script>
import { in_array } from '@/utils/index.js'
import { learnDetail, getPreStudyWord } from '@/api/learn.js'
import { reviewCycleCreate } from '@/api/reviewCycle.js'
import chooseWord from './components/chooseWord.vue'
import createCycle from './create.vue'
export default {
    components: {
        chooseWord,
        createCycle
    },
    data() {
        return {
            in_array,
            loading: false,
            cycleLoading: false,
            isAll: false,
            step: 1,
            learnId: 0,
            userId: 0,
            learnInfo: {},
            wordList: [],
            chooseWords: []
        }
    },
    mounted(){
        this.learnId = this.$route.query.learnId
        this.getLearnInfo()
    },
    methods:{
        getLearnInfo() {
            this.loading = true
            learnDetail({id: this.learnId}).then(res => {
                this.loading = false
                this.learnInfo = res.data
                this.userId = this.learnInfo.user ? this.learnInfo.user.id : 0
                this.getWords()
            }).finally(() => {
                this.loading = false
            })
        },
        getWords() {
            this.loading = true
            getPreStudyWord({learnId: this.learnId}).then(res => {
                this.loading = false
                this.wordList = res.data.words
            }).finally(() => {
                this.loading = false
            })
        },
        //全选
        allChoose() {
            this.isAll = true
            let words = this.chooseWords
            this.wordList.forEach((item, ele) => {
                if (!this.in_array(item.id, this.chooseWords)) {
                    words.push(item.id)
                }
            })
            this.chooseWords = words
        },
        //取消全选
        cancelAllChoose() {
            this.isAll = false
            this.chooseWords = []
        },
        perNextStep() {
            this.step = this.step == 2 ? 1 : 1
        },
        nextStep() {
            if (this.step == 1 && this.chooseWords.length == 0) {
                this.$message.error('请先选择词汇')
                return false
            }
            this.step = this.step == 1 ? 2 : 1
        },
        chooseWordFun(word) {
            if (this.in_array(word.id, this.chooseWords)) {
                this.chooseWords.splice(this.chooseWords.indexOf(word.id), 1)
            } else {
                this.chooseWords.push(word.id)
            }
        },
        //提交抗遗忘
        submitCycelFn(time) {
            if (this.chooseWords.length == 0) {
                this.$message.error('请先选择词汇')
                return false
            }

            if (!time) {
                this.$message.error('请选择时间')
                return false
            }

            let param = {
                learnId: this.learnId,
                userId: this.userId,
                courseId: this.learnInfo.course.id,
                time: time,
                words: this.chooseWords
            }

            this.$confirm('确定已选完抗遗忘单词，提交创建？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.cycleLoading = true
                reviewCycleCreate(param).then(res => {
                    this.cycleLoading = false
                    if (res.error == 0) {
                        this.$message.success('创建成功')
                        this.$router.push({path: '/'})
                    }
                }).finally(() => {
                    this.cycleLoading = false
                })
            }).catch(() => {
                this.cycleLoading = false
            });
        },
        backFun() {
            this.$router.push({path: '/'})
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.result_bg{width: 50.5rem;height: 21.5rem}

::v-deep .el-input__inner{
    background-color: #fff;
    border: 1px solid #fff;
    // text-align: right;
}
::v-deep .el-select-dropdown__item{
    border-bottom: 1px solid #F0F2F4;
    // padding: 2rem 0;
    &:last-child{
        border-bottom:none ;
    }
}
.po{
    width: 0;
    height: 0;
}
.box_cont{
    padding: 2rem 0 0;
}
.title{
    padding-right: 21.7rem;
    padding: 0 71.7rem 0 10rem;
    h2{
        font-size: 3.2rem;
        font-weight: normal;
        display: inline-block;
        color: #fff;

    }
}
.title_cont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    // padding: 0 32px;
    text-align: center;
    padding: 0 10rem;

    h2{
        font-size: 3.2rem;
        font-weight: normal;
        display: inline-block;
        // color: #fff;
    }
    .right{
        width: 0;
        position: relative;
        .select_cont{
            position: absolute;
            width: max-content;
            top: -18px;
            left: 0px;
            display: flex;
            align-items: center;
        }
    }
}
.test_cont{
    width: 100%;
    margin: 2rem 0 0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    // flex-wrap: wrap;
    // justify-content: space-between;
    align-content: flex-start;
    padding: 4rem 10rem 0 10rem;
    .word_cont{
        width: 49%;
        padding:2rem 2.5rem;
        margin-bottom: 1.5rem;
        border-radius: 10px;
        background: #F7F8FA;
        background: #E8EBFF;
        transition-duration: 0.35s;
        .word_left{
            .word_lish{
                // color:$color8;
                margin-bottom: 5px;
                font-size: 3.6rem;
            }
            .word_text{
                color: #626780;
                font-size: 2.4rem;
            }
        }
        .word_right{
            margin: auto 0;
            img{
                width: 4rem;
                height: 4rem;
                margin-left: 2.4rem;
            }
        }
        &:hover{
            background: #F69B2C;
            .word_lish{
                color: #fff;
            }
            .word_text{
                color: #fff;
            }
        }
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:$background-theme;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
        height:80%;
    }
}
.attend_btn{
    // color: #fff;
    width: 100%;
    // margin-top: 40px;
    font-size: 2.4rem;
    // padding: 2rem calc(71.7rem + 6px) 2rem  10rem;
    padding: 2rem calc(10rem + 6px) 2rem  10rem;
    // border-top: 2px solid #4762BB;
}
.num{
    color:$theme-color;
}
.right{
    color:$color8;
}
.wrong{
    color:$background-red;
}


.dialog_box{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    overflow: hidden;
    box-sizing: border-box;
 }
 .detail_cont{
  width: 40%;
  // height: 40vh;
  // background-color: #fff;
  background-image: url(@/assets/img/bj_1.png);
  // background-size: 100% 100%;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  padding: 2rem 9.2rem 4rem;
.row_text{
    font-size: 3.2rem;
    margin: 5rem 0;
    .line{
        color: #B4B6BE;
        margin: 0 5.4rem;
        font-size: 2.2rem;
    }
}
  .btn_cont{
    width: 100%;
    .dialog_btn1{
        width: 40%;
        border-radius: 4px;
        // height: 5.2rem;
        // line-height: 5.2rem;
        text-align: center;
        // background: #fff;
        border: 1px solid #019E69;
        color: #019E69;
        font-size: 2rem;
        margin-right: 2.4rem;
    }
    .dialog_btn{
        width: 100%;
        // height: 5.2rem;
        // line-height: 5.2rem;
        text-align: center;
        border-radius: 4px;
        // background: #019E69;
        color: #fff;
        font-size: 2rem;
    }
  }
    
  
 }
 .back_img{
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
}
</style>